<template>
  <div class="personal">
    <PerTop />
    <div class="touXiang">
      <img
        :src="newdata.touxiangImg"
        alt=""
      />
    </div>
    <div class="toPersonal" @click="goPersonal()">编辑</div>
    <section>
      <Information :arr="arr" />
      <MyRoles />
    </section>
    <Message />
  </div>
</template>

<script>
import PerTop from '@/components/personal/personal_top.vue'
import Information from '@/components/wode/information.vue'
import MyRoles from '@/components/personal/myRoles.vue'
import Message from '@/components/personal/message.vue'
export default {
  data(){
    return {
      arr:[1]
    }
  },
  components:{
    PerTop,
    Information,
    MyRoles,
    Message
  },
  methods: {

  },
  created(){
    this.$store.dispatch('getinformation',{url:"/data/wode/information"})
  },
  computed:{
    newdata(){
      return this.$store.state.information.data;
    }
  },
}
</script>

<style scoped>
.personal {
  position: relative;
}
.personal .touXiang {
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: 1.45rem;
  left: 0.25rem;
}
.personal .touXiang img {
  width: 100%;
  height: 100%;
}
.personal .toPersonal {
  width: 0.58rem;
  height: 0.28rem;
  position: absolute;
  right: 0;
  top: 1.92rem;
  right: 0.15rem;
  text-align: center;
  line-height: 0.26rem;
  font-size: 0.14rem;
  border-radius: 0.05rem;
  color: rgb(25, 163, 254);
  border: 0.02rem solid rgb(25, 163, 254);
}
.personal section {
  margin-top: 0.6rem;
  min-height: 3rem;
  padding: 0 0.15rem;
}
</style>